<template>
  <div class="container with-nav-padding">
    <div class="comment-content">
      <textarea
        v-model="content"
        placeholder="请输入申请内容..."
        name=""
        id=""
      ></textarea>
    </div>
    <div class="img-area">
      <img
        @click="fileList.splice(img_index, 1)"
        class="comment-img"
        :key="img_index"
        v-for="(img, img_index) in fileList"
        :src="img"
      />
      <label v-if="fileList.length < 3" class="add-img" for="after-sale">
        <div class="box">
          <div class="text">添加图片</div>
        </div>
      </label>
      <input
        ref="file"
        @change="fileUpload"
        type="file"
        id="after-sale"
        style="position:absolute; clip:rect(0 0 0 0);"
        multiple
        accept="image/*"
      />
    </div>
    <button @click="submit" class="bottom-btn" :style="{backgroundColor: mainColor}">提交</button>
  </div>
</template>

<script>
import { orderAfterSale } from "@/api/profile";
import { fileUpload } from "@/api/file";
import { mapState } from 'vuex'
export default {
  data() {
    return {
      content: "",
      fileList: []
    };
  },
  computed: {
    ...mapState({
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor,
    })
  },
  methods: {
    fileUpload() {
      if (
        document.getElementById("after-sale").files.length +
          this.fileList.length >
        3
      ) {
        this.$dialog.toast({
          mes: "最多支持上传3张图片",
          timeout: 2000,
          icon: "error"
        });
        return;
      }
      for (
        let i = 0;
        i < document.getElementById("after-sale").files.length;
        i++
      ) {
        let formData = new FormData();
        formData.append("file", document.getElementById("after-sale").files[i]);
        fileUpload(formData).then(res => {
          if (res.status === 200) {
            this.fileList.push(res.data.data.file);
          }
        });
      }
    },
    submit() {
      orderAfterSale({
        id: this.$route.query.id,
        content: this.content,
        image: this.fileList
      }).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: "申请提交成功",
            timeout: 1500,
            icon: "success"
          });
          this.$router.go(-1);
        }
      });
    }
  },
  created() {
    if (!this.$route.query.id) {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  font-size: 0.64rem;

  .bottom-btn {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #fff;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    background: #0078ff;
    color: #fff;
    border: none;
  }

  .comment-content {
    margin-top: 0.48rem;
    padding: 0 3.2%;
    background: #fff;
    overflow: hidden;

    textarea {
      border: none;
      height: 10rem;
      width: 100%;
      margin: 0.7rem 0;
    }
  }

  .img-area {
    padding: 0.48rem;
    .comment-img {
      width: 4rem;
      height: 4rem;
      margin: 0.12rem;
      vertical-align: top;
    }
    .add-img {
      width: 4rem;
      display: inline-block;
      vertical-align: top;
      margin: 0.12rem;
      .box {
        background: #fff;
        width: 4rem;
        height: 4rem;
        border: 1px dashed rgba(204, 204, 204, 1);
        background-image: url("../../../assets/发布评价-两个商品-assets/相机.png");
        background-size: 1.2rem 0.96rem;
        background-repeat: no-repeat;
        background-position: 50% 40%;

        .text {
          text-align: center;
          font-size: 0.48rem;
          margin-top: 2.5rem;
          color: #999999;
        }
      }
    }
  }
}
</style>
